<template>
  <div id='BacAstTestMthDict'>
    <Breadcrumb content='药敏测试方法' />
    <div class='bodyContent'>
      <el-tabs type='border-card'>
        <el-tab-pane label='药敏测试方法'>
          <Splitpanes class='area'>
            <Pane size='55'>
              <vxe-toolbar perfect>
                <template #buttons>
                  <span class='smallToolTitle'>名称模糊查找:</span>
                  <vxe-input v-model='form.antName' placeholder='名称' class='vxeInputSearch' type='text' clearable
                             @clear='findAntibioticsDictPageList'></vxe-input>
                  <vxe-button type='text' icon='vxe-icon-search' class='button-blue SearchBtn' content='查询'
                              :loading='loading' @click='findAntibioticsDictPageList'></vxe-button>
                  <vxe-button type='text' class='button-blue' icon='vxe-icon-add' content='新增'
                              @click='addBacGerm'></vxe-button>
                  <vxe-button type='text' icon='vxe-icon-delete' class='button-red' content='删除'
                              @click='handleDelete'></vxe-button>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-sort" content="从标准库创建" @click="staDataSync"></vxe-button>

                </template>
              </vxe-toolbar>

              <div class='tableBox'>
                <vxe-table ref='antibioticsDictTable' border='inner' align='left' class='mytable-scrollbar' height='auto'
                           :data='antibioticsDictList' :expand-config='{ expandAll: true, reserve: true }'
                           :row-config='{ isCurrent: true, isHover: true }' :keyboard-config='{
                    isArrow: true,
                    isTab: true,
                    isEdit: true
                  }' :edit-config="{ trigger: 'dblclick', mode: 'row', showStatus: true }" resizable show-overflow
                           keep-source @current-change='roleRowClick'>
                  <vxe-column type='checkbox' width='30px'></vxe-column>
                  <vxe-column field='code' title='编码'></vxe-column>
                  <vxe-column field='name' title='名称'></vxe-column>
                  <vxe-column field='standardName' title='标准名'></vxe-column>
                  <vxe-column field='inputCode' title='输入码'></vxe-column>
                  <vxe-column field='minMeasurement' title='最小测量值'></vxe-column>
                  <vxe-column field='maxMeasurement' title='最大测量值'></vxe-column>
                  <vxe-column field='isStatic' title='是否静态'>
                    <template #default='{ row }'>
                      <el-tag type='danger' v-if="row.isStatic === '0'">否</el-tag>
                      <el-tag type='success' v-else-if="row.isStatic === '1'">是</el-tag>
                      <span v-else>——</span>
                    </template>
                  </vxe-column>
                  <vxe-column field='displayOrder' title='显示顺序'></vxe-column>
                </vxe-table>
              </div>
            </Pane>
            <Pane size='45'>
              <el-tabs type='border-card'>
                <el-tab-pane label='基本信息'>
                  <!--药敏测试方法 基本信息表单-->
                  <BacAntibioticsDictForm ref='refFormData' @getTableData='findAntibioticsDictPageList' />
                </el-tab-pane>
              </el-tabs>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label='操作日志'>
          <LogInfo requestUrl='/lis/astTestMth'></LogInfo>
        </el-tab-pane>
      </el-tabs>
      <el-drawer v-model="showStaData" title="药敏测试方法标准库同步" direction="rtl" size="50%" destroy-on-close="true">
        <vxe-button type="text" class="button-blue" icon="vxe-icon-copy" style="margin-left:5px;" content="复制" @click="staDataInsert"></vxe-button>
        <vxe-table ref="staTableRef" border="inner" align="left" class="mytable-scrollbar" :loading="showLoading" height="95%" :data="staTableData" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, enabled: false }" show-overflow keep-source>
          <vxe-column type="checkbox" fixed="left" width="26"></vxe-column>
          <vxe-column type="seq" title="#" width="30"></vxe-column>
          <vxe-column field='drugMthNo' title='编码'></vxe-column>
          <vxe-column field='drugMthNa' title='名称'></vxe-column>
          <vxe-column field='standardNa' title='标准名'></vxe-column>
          <vxe-column field='inputCode' title='输入码'></vxe-column>
          <vxe-column field='minMeasurement' title='最小测量值'></vxe-column>
          <vxe-column field='maxMeasurement' title='最大测量值'></vxe-column>
          <vxe-column field='isStatic' title='是否静态'>
            <template #default='{ row }'>
              <el-tag type='danger' v-if="row.isStatic === '0'">否</el-tag>
              <el-tag type='success' v-else-if="row.isStatic === '1'">是</el-tag>
              <span v-else>——</span>
            </template>
          </vxe-column>
          <vxe-column field='seq' title='显示顺序'></vxe-column>
        </vxe-table>
      </el-drawer>

    </div>
  </div>
</template>

<script setup lang='ts'>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { getCurrentInstance, onMounted, reactive, ref } from 'vue';
import { Pane, Splitpanes } from 'splitpanes';
import { AppStore } from '@/stores/store';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import BacAntibioticsDictForm from './BacAstTestMthDictForm.vue'; //检验仪器基本信息表单
import LogInfo from '@/components/LogInfo.vue'; //日志

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let store = AppStore();
let form = reactive({
  antName: '', //名称
  keyvalue:''
});


let antibioticsDictList: any = reactive([]); //药敏测试方法列表

// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];

let page = reactive({
  currentPage: 1,
  pageSize: 500,
  totalResult: 0
});

let loading = ref(false); //查询按钮加载

let saveLoading = ref(false);

let refFormData: any = ref(null); //信息表单ref
let staTableData = reactive([]);
let showLoading = ref(false); //刷新+表格加载
let showStaData = ref(false);
let staTableRef = ref(null);

// 方法定义区 =============

// 页面加载时
onMounted(() => {
  findAntibioticsDictPageList(); //获取检验仪器表格数据
});

function staDataSync() {
  staTableData.length = 0; //放入数据前清空数据
  const url = '/lis/sta/staDrugTestMth/findStaDrugTestMthList';
  proxy.$http
      //注意此处的数据条数
      .get(url, { params: { searchValue: form.keyvalue } })
      .then(async (res: any) => {
        staTableData.push(...res.data);
      })
      .catch((err: any) => {
        showLoading.value = false;
        VxeMessage('耐药类型数据异常', VxeNotifyType.error);
      });

  showStaData.value = true;
}
async function staDataInsert() {
  let arr = await staTableRef.value?.getCheckboxRecords(true);
  if (!(arr.length > 0)) {
    VxeMessage('请勾选要同步的数据', VxeNotifyType.info);
  } else {
    const url = '/lis/bac/base/ast-test-mth/dict/staDataBacAstTestMthDict';
    proxy.$http
        .post(url, arr)
        .then((res: any) => {
          showStaData.value = false;
          findAntibioticsDictPageList(); // 获取检验仪器表格数据
          VxeMessage('同步成功!', VxeNotifyType.success);
        })
        .catch((err: any) => {
          showStaData.value = false;
          VxeMessage(err, VxeNotifyType.error);
        });
  }
}

let addSeq = 0;

// 获取检验仪器表格数据
function findAntibioticsDictPageList() {
  loading.value = true;
  antibioticsDictList.length = 0;
  const url = '/lis/bac/base/ast-test-mth/dict/page';
  proxy.$http
    .get(url, {
      params: {
        pageSize: page.pageSize,
        pageIndex: page.currentPage,
        searchValue: form.antName
      }
    })
    .then((res: any) => {
      antibioticsDictList.push(...res.data.records);
      page.totalResult = res.data.total;
      addSeq = res.data.total + 1;
      refFormData.value.initAddPage(addSeq); //传递给右侧基本信息表单
      roleRowClick({
        row: antibioticsDictList[0],
        rowIndex: 0
      });
      loading.value = false;
    })
    .catch((err: any) => {
      loading.value = false;
      VxeMessage('搜索药敏测试方法列表异常', VxeNotifyType.error);
    });
}

// 新增微生物
function addBacGerm() {
  const $formRef = refFormData.value;
  refFormData.value.addNew();
}

//删除按钮
function handleDelete() {
  const selectRows = (proxy.$refs.antibioticsDictTable as any).getCheckboxRecords();
  if (selectRows.length <= 0) {
    VxeMessage('请勾选需要删除的数据', VxeNotifyType.warning);
    return;
  } else {
    proxy.$confirm('您确定要删除当前选中的这条数据吗?', '提示', {
      cancelButtonClass: 'cancel-button',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      const commaSeparatedIds = selectRows.map((row) => row.id);
      const ids = commaSeparatedIds.join(',');
      const data = { ids: ids };
      const url = '/lis/bac/base/ast-test-mth/dict/delete';
      proxy.$http.post(url, data).then((res: any) => {
        findAntibioticsDictPageList();
        refFormData.value.clearFormData(); //调用子组件的清空表单方法
        VxeMessage(res.status.msg, VxeNotifyType.success);
      }).catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
    });
  }
}

// 点击表格当前行
function roleRowClick({ row, rowIndex }: any) {
  refFormData.value.initPage(row); //传递给右侧基本信息表单
  (proxy.$refs.antibioticsDictTable as any).setCurrentRow(row);
}

</script>

<style lang='scss' scoped>
#BacAstTestMthDict {
  height: 100%;

  .bodyContent {
    height: calc(100% - 60px);

    .el-tabs {
      height: 100%;

      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0px;

        .el-tab-pane {
          height: 100%;
        }
      }
    }

    .area {
      background-color: $base-white;
    }

    // 附加按钮间距
    .button-blue,
    .button-red {
      margin: 5px 0 5px 5px;
    }

    // 查询按钮
    .SearchBtn {
      margin-right: 5px;
    }

    .tableBox {
      height: calc(100% - 40px);

      .vxe-table {
        height: 100%;

        :deep(.vxe-table--render-wrapper) {
          height: 100%;

          .vxe-table--main-wrapper {
            height: 100%;

            .vxe-table--body-wrapper {
              height: calc(100% - 26px) !important;
            }
          }
        }
      }
    }
  }
}
</style>

